<template>
  <el-table
    v-loading="loading"
    :data="intfs"
    table-layout="auto"
    border
    stripe
    @sort-change="sortChange"
    @cell-dblclick="onCellDblClick"
  >
    <el-table-column
      v-if="colIndexs.created_tm"
      fixed
      prop="base_field.created_tm"
      label="创建时间"
      sortable="custom"
      :formatter="dateFormat"
    />
    <el-table-column
      v-if="colIndexs.modify_tm"
      fixed
      prop="base_field.modify_tm"
      label="修改时间"
      sortable="custom"
      :formatter="dateFormat"
    />
    <el-table-column v-if="colIndexs.name" prop="name" label="角色名称" />
    <el-table-column
      v-if="colIndexs.code"
      prop="code"
      label="角色编码"
      sortable="custom"
    />
    <el-table-column
      v-if="colIndexs.creator_nm"
      prop="base_field.creator_nm"
      label="创建者"
    />
    <el-table-column
      v-if="colIndexs.mender_nm"
      prop="base_field.mender_nm"
      label="修改者"
    />
    <el-table-column v-if="colIndexs.desc" prop="desc" label="角色说明" />
    <el-table-column
      v-if="colIndexs.new || colIndexs.edit || colIndexs.delete"
      fixed="right"
      label="操作"
    >
      <template v-if="colIndexs.new" #header>
        <el-row justify="center">
          <el-col :span="10">
            <el-button
              type="primary"
              :icon="Plus"
              circle
              size="small"
              @click.prevent="newRow"
            />
          </el-col>
        </el-row>
      </template>
      <template #default="scope">
        <el-row :gutter="5">
          <el-col :span="15">
            <el-icon
              v-if="colIndexs.edit"
              color="blue"
              style="cursor: pointer"
              @click.prevent="editRow(scope.row)"
            >
              <Edit />
            </el-icon>
          </el-col>
          <el-col :span="9">
            <el-popconfirm
              v-if="colIndexs.delete"
              title="确认删除角色么？"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="deleteRow(scope.row)"
              @cancel="ElMessage.info('取消删除')"
            >
              <template #reference>
                <el-icon color="red" style="cursor: pointer">
                  <Delete />
                </el-icon>
              </template>
            </el-popconfirm>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

import type { Intf } from "@/components/elm/ElmIntfEdit";
import { Plus } from "@element-plus/icons-vue";
import { PropType } from "vue";
import { ElMessage } from "element-plus";
import { IntfDeleteApi } from "@/apis/home";

const TmZone = "Asia/Shanghai",
  TmFormat = "YYYY-MM-DD HH:mm:ss";

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(TmZone);

const props = defineProps({
    intfs: {
      type: Array as PropType<Intf[]>,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
    overrideDelete: {
      type: Boolean,
      default: false,
    },
    colIndexs: {
      type: Object as PropType<{ [key: string]: boolean }>,
      default: () => ({
        created_tm: true,
        modify_tm: true,
        creator_nm: true,
        mender_nm: true,
        name: true,
        code: true,
        desc: true,
        new: true,
        edit: true,
        delete: true,
      }),
    },
  }),
  emit = defineEmits(["sortChange", "editRow", "deleteRow"]),
  sortChange = (column: any) => {
    emit("sortChange", column);
  },
  dateFormat = (row: any) => {
    return dayjs(row.base_field.created_tm).tz(TmZone).format(TmFormat);
  },
  newRow = () => {
    emit("editRow");
  },
  editRow = (row: any) => {
    emit("editRow", row);
  },
  deleteRow = (row: any) => {
    if (props.overrideDelete) {
      emit("deleteRow", row);
    } else {
    }
  },
  onCellDblClick = (
    row: any,
    column: any,
    cell: HTMLTableCellElement,
    event: Event
  ) => {
    emit("editRow", row);
  };
</script>
